<template>
  <div class="toggleLeft">
    <div v-for="(listItem,index) in list" :class="['cursorD', {'changeHoverDeep':!listItem.children||listItem.children.length==0}]" :style="{height:listItem.children&&listItem.children.length>0&&!listItem.isHide?'calc(calc('+listItem.children.length+' * 50px) + 30px)':'50px'}">
      <p class="toTitle" @click="listItem.children&&listItem.children.length>0?changHide(listItem):gotoIt(listItem.turn)">
        <span class="el-icon-star-on"></span>{{listItem.name}}
        <span :class="['rightIcon','activeColor', {'el-icon-arrow-right':listItem.isHide},{'el-icon-arrow-down':!listItem.isHide}]" v-if="listItem.children&&listItem.children.length>0"></span>
      </p>
      <p class="line" v-if="index!=list.length-1" :style="{height:listItem.children&&listItem.children.length>0?'calc(calc('+listItem.children.length+' * 50px) + 30px)':'38px'}"></p>
      <div v-for="(i,ind) in listItem.children" v-if="!listItem.isHide&&listItem.children&&listItem.children.length>0" class="cursorD changeHoverDeep childrenD" :style="{'margin-top':ind==0?'20px':''}">
        <p class="toTitle" @click="gotoIt(i.turn)">
          <span class="el-icon-star-on"></span>{{i.name}}
        </p>
        <p class="line" v-if="ind!=listItem.children.length-1"></p>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data(){
      return{

      }
    },
    props:{
      list:[Array]
    },
    methods:{
      gotoIt(id){
        this.$emit('gotoIt',id)
      },
      changHide(item){
        this.$emit('changHide',item)
      }
    }
  }
</script>
<style lang="scss">
  .toggleLeft{
    min-width: 120px;
    display: block;
    overflow: auto;
    padding-right: 10px;
    border-right: 1px solid #eee;
    >div{
      height: 50px;
      margin: 0;
      position: relative;
      transition: all .2s linear;
      overflow: hidden;
      .toTitle{
        margin: 0;
        line-height: 23px;
        .rightIcon{
          float: right;
          margin-right: 10px;
          font-size: 16px;
          line-height: 23px;
        }
        >span{
          font-size: 23px;
          margin-right: 10px;
          vertical-align: bottom;
          color: #d4d4d4;
        }
      }
      .line{
        width: 2px;
        background: #d4d4d4;
        height: 38px;
        border: none;
        position: absolute;
        top: 16px;
        margin: 0;
        left: 11px;
      }
      .childrenD{
        height: 50px;
        margin: 0;
        margin-left: 20px;
        position: relative;
      }
    }
    &>div:last-child .line:last-child{
      opacity: 0;
    }
  }
</style>
